<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>山东营销风云榜</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../../css/part/tabHead.css">
    <link rel="stylesheet" href="../../../css/part/mini.css">
    <link rel="stylesheet" href="../../../css/elementui.css">
</head>
<style>

    th {
        font-size: 13px;
    }

    td {
        font-size: 11px;
    }

    .el-input__inner {
        background-color: #b20306;
        color: white;
        border: 0px #b20306;
    }

</style>
<body>

<div id="app">
    <div id="tableHead">
        <img src="../../../img/part/performance/branchPerformance.png" id="branchHead" align="center">
        <a href="../../portal/navigationYX.html"><img src="../../../img/portal/min.png"
                                                      style="position: absolute;top:0px;left: 0px;width: 13%"></a>

        <div style="margin-left: 74.2%;margin-top: -19.2%;position: absolute;width: 25%">
            <template>
                <el-select v-model="timeValue" placeholder="请选择" @change="changeMon">
                    <el-option
                            v-for="value in options"
                            :value="value">
                    </el-option>
                </el-select>
            </template>
        </div>

        <table width="100%">
            <tr>
                <th width="6%" rowspan="2">NO</th>
                <th width="14%" rowspan="2">机构</th>
                <th width="26%" colspan="2">当日</th>
                <th width="26%" colspan="2">当月</th>
               <!-- <th :hidden="tdShow" width="13%" rowspan="2">阶段目标</th>
                <th :hidden="tdShow" width="15%" rowspan="2">目标达成</th>-->
            </tr>
            <tr>
                <th width="13%">预收</th>
                <th width="13%">承保</th>
                <th width="13%">预收</th>
                <th width="13%">承保</th>
            </tr>
        </table>
    </div>
    <div id="midDiv"></div>
    <div class="tableBody">
        <table id="tab" width="100%">
            <tbody id="tbody">
            </tbody>
        </table>
    </div>
</div>
</body>
<script src="../../../js/vue.js"></script>
<script src="../../../js/axios.js"></script>
<script src="../../../js/head.js"></script>
<script src="../../../js/elementui.js"></script>
<script src="../../../js/jquery-3.2.1.min.js"></script>

<script>

    window.onload = function () {
        var link = document.createElement("link");
        link.rel = "stylesheet";
        link.type = "text/css";
        var head = document.getElementsByTagName("head")[0];
        var u = navigator.userAgent;
        if (u.indexOf('iPhone') > -1) {
            link.href = "../../../css/part/iphoneFont.css";
            head.appendChild(link);
        }
        new Vue({
            el: '#app',
            data() {
                return {
                    //中支当日预收
                    branchDayAdvance: 0,
                    //中支当日承保
                    branchDayInSure: 0,
                    //中支当月预收
                    branchMonthAdvance: 0,
                    //中支当月承保
                    branchMonthInSure: 0,
                    //中支名称
                    branchsName: 0,

                    //中支目标
                    target: 0,
                    pojo: [
                        {
                            "branchsName": "成都",
                            "branchDayAdvance": 12000,
                            "branchDayInSure": 15000,
                            "branchMonthAdvance": 210000,
                            "branchMonthInSure": 22000,
                            "target": 100
                        },
                        {
                            "branchsName": "成都",
                            "branchDayAdvance": 12000,
                            "branchDayInSure": 15000,
                            "branchMonthAdvance": 210000,
                            "branchMonthInSure": 22000,
                            "target": 100
                        },
                        {
                            "branchsName": "成都",
                            "branchDayAdvance": 12000,
                            "branchDayInSure": 15000,
                            "branchMonthAdvance": 210000,
                            "branchMonthInSure": 22000,
                            "target": 100
                        },
                        {
                            "branchsName": "成都",
                            "branchDayAdvance": 12000,
                            "branchDayInSure": 15000,
                            "branchMonthAdvance": 210000,
                            "branchMonthInSure": 22000,
                            "target": 100
                        },
                        {
                            "branchsName": "成都",
                            "branchDayAdvance": 12000,
                            "branchDayInSure": 15000,
                            "branchMonthAdvance": 210000,
                            "branchMonthInSure": 22000,
                            "target": 100
                        },
                        {
                            "branchsName": "成都",
                            "branchDayAdvance": 12000,
                            "branchDayInSure": 15000,
                            "branchMonthAdvance": 210000,
                            "branchMonthInSure": 22000,
                            "target": 100
                        },
                    ],

                    divHeight: 0,
                    //目标字段
                    targetField: '',
                    options: [],
                    timeValue: 0,
                    tdShow: false,
                    nowDay: 1,

                }
            },
            created() {
                this.getSelTime();
                this.findYxTargetThisMon()
            },
            methods: {
                getSelTime() {
                    var time = new Date();
                    var year = time.getFullYear();
                    var month = time.getMonth();
                    this.nowDay = time.getDate();
                    var nowTime = year + "-" + (month + 1);
                    this.options[0] = nowTime;
                    var nextTime = month == 11 ? ((year + 1) + "-1") : (year + "-" + (month + 2));
                    this.options[1] = nextTime;
                    this.timeValue = this.options[0];
                },
                changeMon() {

                    this.branchDayAdvance = 0;
                    this.branchDayInSure = 0;
                    this.branchMonthAdvance = 0;
                    this.branchMonthInSure = 0;
                    this.target = 0;
                    $('#tbody>tr').remove();
                    if (this.timeValue === this.options[1]) {
                        this.findYxTargetNextMon();
                    } else {
                        this.findYxTargetThisMon();
                    }
                },
                findYxTargetThisMon() {
                    axios.get(`/performance/findYxTargetThisMon`).then(response => {
                        this.tdShow = response.data;
                        if (this.tdShow) {
                            this.getbranchDataThisMonNoTarget();
                        } else {
                            this.getbranchDataThisMonHaveTarget();
                        }
                    })
                },
                findYxTargetNextMon() {
                    axios.get(`/performance/findYxTargetNextMon`).then(response => {
                        this.tdShow = response.data;
                        if (this.tdShow) {
                            this.getbranchDataNextMonNoTarget();
                        } else {
                            this.getbranchDataNextMonHaveTarget();
                        }
                    })
                },
                //获取各中支的数据
                getbranchDataThisMonHaveTarget() {
                    document.getElementById("midDiv").style.height = window.getComputedStyle(document.getElementById("tableHead")).getPropertyValue("height");
                    axios.get(`/performance/getBranchPerformanceThisMon`).then(response => {
                        this.pojo = response.data;
                        var str = "";//定义用于拼接的字符串
                        for (var i = 0; i < this.pojo.length; i++) {
                            this.branchDayAdvance = this.branchDayAdvance + this.pojo[i].branchDayAdvance;
                            this.branchDayInSure = this.branchDayInSure + this.pojo[i].branchDayInSure;
                            this.branchMonthAdvance = this.branchMonthAdvance + this.pojo[i].branchMonthAdvance;
                            this.branchMonthInSure = this.branchMonthInSure + this.pojo[i].branchMonthInSure;
                            this.target = this.target + Number(this.pojo[i].target);
                            //拼接表格的行和列
                            str = "<tr><td width=\"6%\">" + (i + 1) + "</td>" +
                                "<td width=\"14%\">" + this.pojo[i].branchsName + "</td>" +
                                "<td width=\"13%\">" + this.dataHandle(Math.round(this.pojo[i].branchDayAdvance / 1000) / 10) + "</td>" +
                                "<td width=\"13%\">" + this.dataHandle(Math.round(this.pojo[i].branchDayInSure / 1000) / 10) + "</td>" +
                                "<td width=\"13%\">" + this.dataHandle(Math.round(this.pojo[i].branchMonthAdvance / 1000) / 10) + "</td>" +
                                "<td width=\"13%\">" + this.dataHandle(Math.round(this.pojo[i].branchMonthInSure / 1000) / 10) + "</td>" +
                                "<td width=\"13%\">" + this.pojo[i].target + "</td>" +
                                "<td width=\"15%\">" + this.dataPercent(this.doubleHandle(this.nowDay < 16 ? this.pojo[i].branchMonthAdvance : this.pojo[i].branchMonthInSure, this.pojo[i].target)) + "</td></tr>";
                            $("#tbody").append(str);
                        }
                        str = "<tr><th colspan=\"2\" style=\"font-weight: bolder\">" + '合计:' + "</th>" +
                            "<th width=\"13%\">" + this.dataHandle(Math.round(this.branchDayAdvance / 1000) / 10) + "</th>" +
                            "<th width=\"13%\">" + this.dataHandle(Math.round(this.branchDayInSure / 1000) / 10) + "</th>" +
                            "<th width=\"13%\">" + Math.round(this.branchMonthAdvance / 10000) + "</th>" +
                            "<th width=\"13%\">" + Math.round(this.branchMonthInSure / 10000) + "</th>" +
                            "<th width=\"13%\">" + this.target + "</th>" +
                            "<th width=\"15%\">" + this.dataPercent(this.doubleHandle(this.nowDay < 16 ? this.branchMonthAdvance : this.branchMonthInSure, this.target)) + "</th></tr>";
                        $("#tbody").append(str);
                    })
                },
                getbranchDataThisMonNoTarget() {
                    document.getElementById("midDiv").style.height = window.getComputedStyle(document.getElementById("tableHead")).getPropertyValue("height");
                    axios.get(`/performance/getBranchPerformanceThisMon`).then(response => {
                        this.pojo = response.data;
                        var str = "";//定义用于拼接的字符串
                        for (var i = 0; i < this.pojo.length; i++) {
                            this.branchDayAdvance = this.branchDayAdvance + this.pojo[i].branchDayAdvance;
                            this.branchDayInSure = this.branchDayInSure + this.pojo[i].branchDayInSure;
                            this.branchMonthAdvance = this.branchMonthAdvance + this.pojo[i].branchMonthAdvance;
                            this.branchMonthInSure = this.branchMonthInSure + this.pojo[i].branchMonthInSure;

                            //拼接表格的行和列
                            str = "<tr><td width=\"6%\">" + (i + 1) + "</td>" +
                                "<td width=\"14%\">" + this.pojo[i].branchsName + "</td>" +
                                "<td width=\"13%\">" + this.dataHandle(Math.round(this.pojo[i].branchDayAdvance / 1000) / 10) + "</td>" +
                                "<td width=\"13%\">" + this.dataHandle(Math.round(this.pojo[i].branchDayInSure / 1000) / 10) + "</td>" +
                                "<td width=\"13%\">" + this.dataHandle(Math.round(this.pojo[i].branchMonthAdvance / 1000) / 10) + "</td>" +
                                "<td width=\"13%\">" + this.dataHandle(Math.round(this.pojo[i].branchMonthInSure / 1000) / 10) + "</td></tr>";
                            $("#tbody").append(str);
                        }
                        str = "<tr><th colspan=\"2\" style=\"font-weight: bolder\">" + '合计:' + "</th>" +
                            "<th width=\"13%\">" + this.dataHandle(Math.round(this.branchDayAdvance / 1000) / 10) + "</th>" +
                            "<th width=\"13%\">" + this.dataHandle(Math.round(this.branchDayInSure / 1000) / 10) + "</th>" +
                            "<th width=\"13%\">" + Math.round(this.branchMonthAdvance / 10000) + "</th>" +
                            "<th width=\"13%\">" + Math.round(this.branchMonthInSure / 10000) + "</th></tr>";
                        $("#tbody").append(str);
                    })
                },

                //获取各中支的数据
                getbranchDataNextMonHaveTarget() {
                    document.getElementById("midDiv").style.height = window.getComputedStyle(document.getElementById("tableHead")).getPropertyValue("height");
                    axios.get(`/performance/getBranchPerformanceNextMon`).then(response => {
                        this.pojo = response.data;
                        var str = "";//定义用于拼接的字符串
                        for (var i = 0; i < this.pojo.length; i++) {
                            this.branchDayAdvance = this.branchDayAdvance + this.pojo[i].branchDayAdvance;
                            this.branchDayInSure = this.branchDayInSure + this.pojo[i].branchDayInSure;
                            this.branchMonthAdvance = this.branchMonthAdvance + this.pojo[i].branchMonthAdvance;
                            this.branchMonthInSure = this.branchMonthInSure + this.pojo[i].branchMonthInSure;
                            this.target = this.target + Number(this.pojo[i].target);
                            //拼接表格的行和列
                            str = "<tr><td width=\"6%\">" + (i + 1) + "</td>" +
                                "<td width=\"14%\">" + this.pojo[i].branchsName + "</td>" +
                                "<td width=\"13%\">" + this.dataHandle(Math.round(this.pojo[i].branchDayAdvance / 1000) / 10) + "</td>" +
                                "<td width=\"13%\">" + this.dataHandle(Math.round(this.pojo[i].branchDayInSure / 1000) / 10) + "</td>" +
                                "<td width=\"13%\">" + this.dataHandle(Math.round(this.pojo[i].branchMonthAdvance / 1000) / 10) + "</td>" +
                                "<td width=\"13%\">" + this.dataHandle(Math.round(this.pojo[i].branchMonthInSure / 1000) / 10) + "</td>" +
                                "<td width=\"13%\">" + this.pojo[i].target + "</td>" +
                                "<td width=\"15%\">" + this.dataPercent(this.doubleHandle(this.pojo[i].branchMonthAdvance, this.pojo[i].target)) + "</td></tr>";
                            $("#tbody").append(str);
                        }
                        str = "<tr><th colspan=\"2\" style=\"font-weight: bolder\">" + '合计:' + "</th>" +
                            "<th width=\"13%\">" + this.dataHandle(Math.round(this.branchDayAdvance / 1000) / 10) + "</th>" +
                            "<th width=\"13%\">" + this.dataHandle(Math.round(this.branchDayInSure / 1000) / 10) + "</th>" +
                            "<th width=\"13%\">" + Math.round(this.branchMonthAdvance / 10000) + "</th>" +
                            "<th width=\"13%\">" + Math.round(this.branchMonthInSure / 10000) + "</th>" +
                            "<th width=\"13%\">" + this.target + "</th>" +
                            "<th width=\"15%\">" + this.dataPercent(this.doubleHandle(this.branchMonthAdvance, this.target)) + "</th></tr>";
                        $("#tbody").append(str);
                    })
                },
                getbranchDataNextMonNoTarget() {
                    document.getElementById("midDiv").style.height = window.getComputedStyle(document.getElementById("tableHead")).getPropertyValue("height");
                    axios.get(`/performance/getBranchPerformanceNextMon`).then(response => {
                        this.pojo = response.data;
                        var str = "";//定义用于拼接的字符串
                        for (var i = 0; i < this.pojo.length; i++) {
                            this.branchDayAdvance = this.branchDayAdvance + this.pojo[i].branchDayAdvance;
                            this.branchDayInSure = this.branchDayInSure + this.pojo[i].branchDayInSure;
                            this.branchMonthAdvance = this.branchMonthAdvance + this.pojo[i].branchMonthAdvance;
                            this.branchMonthInSure = this.branchMonthInSure + this.pojo[i].branchMonthInSure;
                            //拼接表格的行和列
                            str = "<tr><td width=\"6%\">" + (i + 1) + "</td>" +
                                "<td width=\"14%\">" + this.pojo[i].branchsName + "</td>" +
                                "<td width=\"13%\">" + this.dataHandle(Math.round(this.pojo[i].branchDayAdvance / 1000) / 10) + "</td>" +
                                "<td width=\"13%\">" + this.dataHandle(Math.round(this.pojo[i].branchDayInSure / 1000) / 10) + "</td>" +
                                "<td width=\"13%\">" + this.dataHandle(Math.round(this.pojo[i].branchMonthAdvance / 1000) / 10) + "</td>" +
                                "<td width=\"13%\">" + this.dataHandle(Math.round(this.pojo[i].branchMonthInSure / 1000) / 10) + "</td></tr>";
                            $("#tbody").append(str);
                        }
                        str = "<tr><th colspan=\"2\" style=\"font-weight: bolder\">" + '合计:' + "</th>" +
                            "<th width=\"13%\">" + this.dataHandle(Math.round(this.branchDayAdvance / 1000) / 10) + "</th>" +
                            "<th width=\"13%\">" + this.dataHandle(Math.round(this.branchDayInSure / 1000) / 10) + "</th>" +
                            "<th width=\"13%\">" + Math.round(this.branchMonthAdvance / 10000) + "</th>" +
                            "<th width=\"13%\">" + Math.round(this.branchMonthInSure / 10000) + "</th></tr>";
                        $("#tbody").append(str);
                    })
                },
                //数据处理
                dataHandle(_this) {
                    var data = _this + "";
                    if (data.indexOf(".") != -1) {
                        return data
                    }
                    return data + ".0";
                },
                //数据处理
                dataPercent(_this) {
                    var data = _this + "";
                    if (data.indexOf(".") != -1) {
                        return data + '%'
                    }
                    if (data == -9999) {
                        return '-'
                    }
                    return data + ".0" + '%';
                },
                //处理两数相除
                doubleHandle(a, b) {
                    if (b == 0) {
                        return -9999;
                    } else {
                        return Math.round(a / 10 / b) / 10;
                    }
                }
            }
        })
    };

</script>

</html>
